<template>
  <div>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <div>审核配置</div>
            </div>
        </template>
        <div>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
            >
                <el-form-item label="审单功能" prop="switch" label-width="auto"> 
                  <el-switch v-model="ruleForm.switch" />
                </el-form-item>
                <div v-if="ruleForm.switch!=false">
                  <el-form-item label="分单模式" prop="Menu"> 
                    <!-- label-width="auto" -->
                    <el-radio-group v-model="ruleForm.Menu">
                        <!-- <el-radio label="关闭" :value="3"/> -->
                        <el-radio label="自动模式" :value="1"/>
                        <el-radio label="手动模式" :value="2"/>
                    </el-radio-group>
                </el-form-item>
                  <el-form-item label="分单老师" prop="splitTeacher">
                  <el-select
                      v-model="ruleForm.splitTeacher"
                      filterable
                      clearable
                      placeholder="请选择分单老师"
                      style="max-width: 500px"
                    >
                      <el-option
                        v-for="item in teacherArr"
                        :key="item.id"
                        :label="item.realName"
                        :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="审单老师" prop="examineTeacher">
                    <el-select
                        v-model="ruleForm.examineTeacher"
                        multiple
                        filterable
                        :max-tags="10"
                        @change="handleChange"
                        placeholder="请选择审单老师"
                        style="max-width: 500px"
                        >
                        <el-option
                            v-for="item in teacherArr"
                            :key="item.id"
                            :label="item.realName"
                            :value="item.id"/>
                        </el-select>
                </el-form-item > 
                <!-- groupId -->
                 <div  v-if="groupId==0">
                  <el-form-item label="是否接受子公司审单" prop="subsidiary" label-width="auto">
                      <el-switch v-model="ruleForm.subsidiary" />
                  </el-form-item>
                  <!-- <el-form-item v-if="ruleForm.subsidiary==true" label="审单是否可提交总公司" prop="headOffice" label-width="auto">
                      <el-switch v-model="ruleForm.headOffice" />
                  </el-form-item> -->
                 </div>
                  <div v-else>
                    <el-form-item label="审单是否可提交总公司" prop="headOffice" label-width="auto">
                      <el-switch v-model="ruleForm.headOffice" />
                    </el-form-item>
                  </div>
                  <div style="min-width: 500px;">
                    <el-row>
                      <el-col :span="24" style="display: flex;min-width: 500px;" >
                        <el-form-item label="会员价格" prop="memberPrice">
                          <el-input-number v-model="ruleForm.memberPrice" :min="1" :max="99999" />
                          <span style="padding:0 30px 0 10px;">元</span>
                        </el-form-item>
                        <el-form-item label="会员次数" prop="memberNumber">
                          <el-input-number v-model="ruleForm.memberNumber" :min="1" :max="99999" />
                          <span style="padding:0 0 0 10px;">次</span>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" style="display: flex;min-width: 500px;">
                        <el-form-item label="B1审单价格" prop="BOnePrice">
                          <el-input-number v-model="ruleForm.BOnePrice" :min="1" :max="99999" />
                          <span style="padding:0 30px 0 10px;">元</span>
                        </el-form-item>
                        <el-form-item label="B1审单次数" prop="BOneNumber">
                          <el-input-number v-model="ruleForm.BOneNumber" :min="1" :max="99999" />
                          <span style="padding:0 0 0 10px;">次</span>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row style="min-width: 500px;">
                      <el-col :span="24" style="display: flex;">
                        <el-form-item label="B2审单价格" prop="BTwoPrice">
                          <el-input-number v-model="ruleForm.BTwoPrice" :min="1" :max="99999" />
                          <span style="padding:0 30px 0 10px;">元</span>
                        </el-form-item>
                        <el-form-item label="B2审单次数" prop="BTwoNumber">
                          <el-input-number v-model="ruleForm.BTwoNumber" :min="1" :max="99999" />
                          <span style="padding:0 0 0 10px;">次</span>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" style="display: flex;min-width: 500px;">
                        <el-form-item label="A2审单价格" prop="ATwoPrice">
                          <el-input-number v-model="ruleForm.ATwoPrice" :min="1" :max="99999" />
                          <span style="padding:0 30px 0 10px;">元</span>
                        </el-form-item>
                        <el-form-item label="A2审单次数" prop="ATwoNumber">
                          <el-input-number v-model="ruleForm.ATwoNumber" :min="1" :max="99999" />
                          <span style="padding:0 0 0 10px;">次</span>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                  
                </div>
                <el-row>
                  <el-col :span="5" style="text-align: right;padding-right: 20px;">
                    <el-button type="warning" plain @click="clearData()">清空</el-button>
                  </el-col>
                  <el-col :span="5">
                    <el-popconfirm
                      width="220"
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      :icon="InfoFilled"
                      icon-color="#626AEF"
                      title="是否确认提交配置?"
                      @confirm="submitForm(ruleFormRef)"
                      @cancel="cancelEvent"
                    >
                      <template #reference>
                        <el-button type="success" plain >提交</el-button>
                      </template>
                    </el-popconfirm>
                    
                  </el-col>
                </el-row>
            </el-form>
        </div>
    </el-card>
  </div>
</template>
<script setup>
  import { reactive, ref,onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { InfoFilled } from '@element-plus/icons-vue'
  import { 
    accountListExpserts, // 获取老师列表
    modifyConfiguration, // 配修改
  } from '@/api/system/account.js';

const formSize = ref('default')
const ruleFormRef = ref()
const teacherArr = ref() // 获取的老师列表
const { groupId } = JSON.parse(
  localStorage.getItem('userDateInfo')
); // 判断角色
console.log(groupId,"dghajsdghh");

const ruleForm = reactive({
  splitTeacher: '', // 分单老师
  examineTeacher:'', // 审核老师
  headOffice: false, // 总公司
  subsidiary: false, // 子公司
  memberPrice:null,//会员价格
  memberNumber:null,//会员次数
  BOnePrice:null,//B1价格
  BOneNumber:null,//B1次数
  BTwoPrice:null,//B2价格
  BTwoNumber:null,//B2次数
  ATwoPrice:null,//A2价格
  ATwoNumber:null,//A2次数
  Menu:3, // 审单
  do:1,// 固定
  switch:false,
})
const rules = reactive({
  switch:[
    { required: true, message: '请设置启用状态', trigger: 'change' }
  ],
  subsidiary:[
    { required: true, message: '请设置启用状态', trigger: 'change' }
  ],
  headOffice:[{ required: true, message: '请设置启用状态', trigger: 'change' },],
  splitTeacher: [
    {
      required: true,
      message: '请选择分单老师',
      trigger: 'change',
    },
  ],
  examineTeacher:[
    {
      required: true,
      message: '请至少一个选择审核老师',
      trigger: 'change',
    },
  ],
  Menu: [
    {
      required: true,
      message: '请选择选单方式',
      trigger: 'change',
    },
  ],
  memberPrice: [
    { required: true, message: '请输入会员价格', trigger: 'blur' },
    { type: 'number', message: '请输入正确的数字格式', trigger: 'blur' },
  ],
  memberNumber: [
    { required: true, message: '请输入会员次数', trigger: 'blur' },
  ],
  BOnePrice: [
    { required: true, message: '请输入B1价格', trigger: 'blur' },
  ],
  BOneNumber: [
    { required: true, message: '请输入B1次数', trigger: 'blur' },
  ],
  BTwoPrice: [
    { required: true, message: '请输入B2价格', trigger: 'blur' },
  ],
  BTwoNumber: [
    { required: true, message: '请输入B2次数', trigger: 'blur' },
  ],
  ATwoPrice: [
    { required: true, message: '请输入A2价格', trigger: 'blur' },
  ],
  ATwoNumber: [
    { required: true, message: '请输入A2次数', trigger: 'blur' },
  ],
})
const handleChange = (value) => {
  if (value.length > 10) {
    ruleForm.examineTeacher = value.slice(0, 10);
    ElMessage({
      showClose: true,
      message: '最多选择10位老师',
      type: 'warning',
    })
  }
};
const getTeacherList = () => {
  accountListExpserts({
    pageSize: 999,
  }).then((res) => {
    teacherArr.value = res.data.data;
  });
}
const clearData = ()=>{
  Object.keys(ruleForm).forEach(key => {
    if (Array.isArray(ruleForm[key])) {
      ruleForm[key] = []; // 重置数组类型字段为空数组
    } else if (typeof ruleForm[key] === 'string') {
      ruleForm[key] = ''; // 清空字符串类型字段
    } else if (typeof ruleForm[key] === 'boolean') {
      ruleForm[key] = false; // 布尔值字段可以重置为初始值
    } else if (typeof ruleForm[key] === 'number') {
      if (key === 'Menu') {
        ruleForm[key] = 3; // 对Menu字段单独处理，重置为3
      } if (key === 'do') {
        ruleForm[key] = 1; // 对do字段单独处理，重置为1,固定值不变
      } else {
        ruleForm[key] = null; 
      }
    }
  });
}
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) { 
      modifyConfiguration({
        data:ruleForm
      }).then((res)=>{
        console.log(res);
        ElMessage({
          showClose: true,
          message: '配置提交成功',
          type: 'success',
        })
      })
    } else {
      ElMessage({
        showClose: true,
        message: '配置提交失败',
        type: 'error',
      })
    }
  })
}
const triggerFunction = () => {
  modifyConfiguration().then((res)=>{
    // 逐个更新 ruleForm 的属性，就是为了防止 Vue 的响应式系统，直接替换可能会导致响应失效
    Object.keys(res.data).forEach(key => {
      if (ruleForm.hasOwnProperty(key)) {
        ruleForm[key] = res.data[key];
      }
    });
    console.log(ruleForm);
  })
};
const cancelEvent = () => {
  console.log('cancel!')
}
onMounted(() => {
  getTeacherList()
  triggerFunction();
});
</script>
  
<style lang="scss" scoped>
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
.box-card {
  margin: 20px;
  .card-header {
      font-size: 20px;
      font-weight: 600;
      color: #1d2129;
      padding: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
  }
}
</style>
  